<template>
	<view>
		<!-- 最外层的容器 -->
		<view class="my-settle-container">
			<!-- 全选区域 -->
			<label class="radio">
				<radio color="#C00000" :checked="isfullchecked" @click="changechecked" /><text>全选</text>
			</label>
			<!-- 合计区域 -->
			<view class="amount-box">
				合计:<text class="amount">￥{{addToCartListStore.checkedmoney}}.00</text>
			</view>
			<!-- 结算按钮 -->
			<view class="btn-settle" @click="issettle">结算({{addToCartListStore.checkedcount}})</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive,
		watch,
		computed
	} from 'vue';
	import {
		onLoad
	} from '@dcloudio/uni-app';
	import {
		useaddToCartListStore,
		useupdateallgoodsstateStore,
		useaddressStore,
		useupdatetokenStore,
		usegobackpageStore
	} from '@/store/store.js';
	const addToCartListStore = useaddToCartListStore()
	const updateallgoodsstateStore = useupdateallgoodsstateStore()
	const addressStore = useaddressStore()
	const updatetokenStore = useupdatetokenStore()
	const gobackpageStore = usegobackpageStore()
	//计算是否全选
	const isfullchecked = computed(() => {
		return addToCartListStore.total == addToCartListStore.checkedcount ? true : false
	})
	//全选和反选
	const changechecked = () => {
		updateallgoodsstateStore.updateallgoodsstate(!isfullchecked.value)
	}
	//判断是否符合结算条件
	const issettle = () => {
		if (!addToCartListStore.checkedcount) return uni.$showMsg('请选择要结算的商品')
		if (!addressStore.addstr) return uni.$showMsg('请选择收货地址')
		if (!updatetokenStore.token) {
			return gotologin()
		}
		payorder()
	}
	//自动跳转登录页面
	const gotologin = () => {
		let timer = 0
		let count = 3
		timer = setInterval(() => {
			count--
			if (count <= 0) {
				clearInterval(timer)
				uni.switchTab({
					url: '/pages/my/my',
					success: () => {
						gobackpageStore.gobackpage({
							// 跳转的方式
							openType: 'switchTab',
							// 从哪个页面跳转过去的
							from: '/pages/cart/cart'
						})
					}
				})
				return
			}
			uni.showToast({
				// 不展示任何图标
				icon: 'none',
				// 提示的消息
				title: '请登录后再结算！' + count + ' 秒后自动跳转到登录页',
				// 为页面添加透明遮罩，防止点击穿透
				mask: true,
				// 1.5 秒后自动消失
				duration: 1500
			})
		}, 1000)
	}
	//微信支付
	const payorder = async () => {
		// 1. 创建订单
		const orderInfo = {
			order_price: 0.01, //这里写死了，实际应该写addToCartListStore.checkedmoney
			consignee_addr: addressStore.addstr,
			goods: addToCartListStore.cart.filter(x => x.goods_state).map(x => ({
				goods_id: x.goods_id,
				goods_number: x.goods_count,
				goods_price: x.goods_price
			}))
		}
		// 1.2 发起请求创建订单
		const {
			data: res
		} = await uni.$http.post('/api/public/v1/my/orders/create', orderInfo)
		// console.log(res);
		if (res.meta.status !== 200) return uni.$showMsg('创建订单失败！')
		// 1.3 得到服务器响应的“订单编号”
		const orderNumber = res.message.order_number
		
		
		// 2. 订单预支付
		// 2.1 发起请求获取订单的支付信息
		const {
			data: res2
		} = await uni.$http.post('/api/public/v1/my/orders/req_unifiedorder', {
			order_number: orderNumber
		})
		// 2.2 预付订单生成失败
		if (res2.meta.status !== 200) return uni.$showError('预付订单生成失败！')
		// 2.3 得到订单支付相关的必要参数
		const payInfo = res2.message.pay
		
		
		// 3. 发起微信支付
		// 3.1 调用 uni.requestPayment() 发起微信支付
		const [err, succ] = await uni.requestPayment(payInfo)
		// 3.2 未完成支付
		if (err) return uni.$showMsg('订单未支付！')
		// 3.3 完成了支付，进一步查询支付的结果
		const {
			data: res3
		} = await uni.$http.post('/api/public/v1/my/orders/chkOrder', {
			order_number: orderNumber
		})
		// 3.4 检测到订单未支付
		if (res3.meta.status !== 200) return uni.$showMsg('订单未支付！')
		// 3.5 检测到订单支付完成
		uni.showToast({
			title: '支付完成！',
			icon: 'success'
		})
	}
</script>

<style lang="scss">
	.my-settle-container {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 50px;
		background-color: white;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding-left: 5px;
		font-size: 14px;

		.radio {
			display: flex;
			align-items: center;
		}

		.amount {
			color: #c00000;
		}

		.btn-settle {
			height: 50px;
			min-width: 100px;
			background-color: #c00000;
			color: white;
			line-height: 50px;
			text-align: center;
			padding: 0 10px;
		}
	}
</style>